<template>
  <AdminLayout>
    <div class="users-management">
          <!-- 页面标题 -->
    <div class="page-header">
            <div class="header-left">
      <h1>用户管理</h1>
              <p class="page-subtitle">管理平台用户账户和权限</p>
            </div>
            <div class="header-stats">
              <div class="stat-item">
                <span class="stat-number">{{ totalUsers }}</span>
                <span class="stat-label">总用户数</span>
              </div>
              <div class="stat-item">
                <span class="stat-number">{{ selectedUsers.length }}</span>
                <span class="stat-label">已选择</span>
              </div>
            </div>
          </div>

          <!-- 操作栏 -->
          <div class="action-bar">
            <div class="left-actions">
              <!-- 批量操作 -->
              <div class="batch-actions" v-if="selectedUsers.length > 0">
                <button @click="batchLock" class="batch-btn lock">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M12,17A2,2 0 0,0 14,15C14,13.89 13.1,13 12,13A2,2 0 0,0 10,15A2,2 0 0,0 12,17M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V10C4,8.89 4.9,8 6,8H7V6A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,3A3,3 0 0,0 9,6V8H15V6A3,3 0 0,0 12,3Z"/>
                  </svg>
                  批量锁定 ({{ selectedUsers.length }})
                </button>
                <button @click="batchUnlock" class="batch-btn unlock">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V10A2,2 0 0,1 6,8H15V6A3,3 0 0,0 12,3A3,3 0 0,0 9,6V8H8V6A4,4 0 0,1 12,2A4,4 0 0,1 16,6V8H18M12,17A2,2 0 0,0 14,15A2,2 0 0,0 12,13A2,2 0 0,0 10,15A2,2 0 0,0 12,17Z"/>
                  </svg>
                  批量解锁 ({{ selectedUsers.length }})
                </button>
                <button @click="batchDelete" class="batch-btn delete">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z"/>
                  </svg>
                  批量删除 ({{ selectedUsers.length }})
                </button>
                <button @click="clearSelection" class="batch-btn clear">
                  清除选择
                </button>
              </div>
    </div>
            <div class="right-actions">
              <!-- 搜索和过滤 -->
        <div class="search-box">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
            <path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"/>
          </svg>
                <input 
                  v-model="searchKeyword" 
                  placeholder="搜索用户名、邮箱、手机号..."
                  @input="searchUsers"
                />
        </div>
              <select v-model="selectedSort" @change="sortUsers" class="sort-filter">
                <option value="">排序方式</option>
                <option value="newest">最新注册</option>
                <option value="oldest">最早注册</option>
                <option value="username">用户名A-Z</option>
                <option value="lastLogin">最近登录</option>
        </select>
            </div>
      </div>

          <!-- 用户列表 -->
          <div class="users-table-container">
            <table class="users-table">
          <thead>
            <tr>
                  <th width="50">
                    <input 
                      type="checkbox" 
                      :checked="isAllSelected" 
                      @change="toggleSelectAll"
                      class="checkbox"
                    />
                  </th>
              <th>用户</th>
                  <th>联系方式</th>
              <th>注册时间</th>
              <th>最后登录</th>
              <th>状态</th>
                  <th width="120">操作</th>
            </tr>
          </thead>
          <tbody>
                <tr v-for="user in usersList" :key="user.userId" class="user-row">
                  <td>
                    <input 
                      type="checkbox" 
                      :checked="isUserSelected(user.userId)" 
                      @change="toggleUserSelection(user.userId)"
                      class="checkbox"
                    />
                  </td>
              <td>
                <div class="user-info">
                  <div class="user-avatar">
                        <img v-if="user.avatar" :src="user.avatar" :alt="user.username" />
                        <div v-else class="default-avatar">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                      <path d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z"/>
                    </svg>
                        </div>
                  </div>
                  <div class="user-details">
                        <strong class="username">{{ user.username }}</strong>
                        <span class="user-id">ID: {{ user.userId }}</span>
                  </div>
                </div>
              </td>
                  <td>
                    <div class="contact-info">
                      <div class="email">{{ user.email || '-' }}</div>
                      <div class="phone">{{ formatPhone(user.phone) || '未绑定手机' }}</div>
                    </div>
              </td>
                  <td>
                    <div class="time-info">
                      <div class="date">{{ formatDate(user.createdTime) }}</div>
                      <div class="time">{{ formatTime(user.createdTime) }}</div>
                    </div>
                  </td>
                  <td>
                    <div class="time-info">
                      <div class="date">{{ formatDate(user.lastLoginTime) || '-' }}</div>
                      <div class="time">{{ formatTime(user.lastLoginTime) || '从未登录' }}</div>
                    </div>
                  </td>
                  <td>
                    <span class="status-badge" :class="getUserStatus(user)">
                      {{ getStatusText(user) }}
                </span>
              </td>
              <td>
                    <div class="action-buttons">
                      <button @click="viewUserDetails(user)" class="action-btn view" title="查看详情">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                          <path d="M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z"/>
                        </svg>
                      </button>
                      <button @click="editUser(user)" class="action-btn edit" title="编辑">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                          <path d="M20.71,7.04L16.96,3.29C16.55,2.88 15.92,2.88 15.51,3.29L14.29,4.51L19.49,9.71L20.71,8.49C21.12,8.08 21.12,7.45 20.71,7.04M17.78,10.42L12.58,5.22L3.29,14.51V19.71H8.49L17.78,10.42Z"/>
                        </svg>
                      </button>
                      <button @click="toggleUserStatus(user)" class="action-btn" :class="user.status === 0 ? 'lock' : 'unlock'" :title="user.status === 0 ? '锁定用户' : '解锁用户'">
                        <svg v-if="user.status === 0" width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                          <path d="M12,17A2,2 0 0,0 14,15C14,13.89 13.1,13 12,13A2,2 0 0,0 10,15A2,2 0 0,0 12,17M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V10C4,8.89 4.9,8 6,8H7V6A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,3A3,3 0 0,0 9,6V8H15V6A3,3 0 0,0 12,3Z"/>
                        </svg>
                        <svg v-else width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                          <path d="M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V10A2,2 0 0,1 6,8H15V6A3,3 0 0,0 12,3A3,3 0 0,0 9,6V8H8V6A4,4 0 0,1 12,2A4,4 0 0,1 16,6V8H18M12,17A2,2 0 0,0 14,15A2,2 0 0,0 12,13A2,2 0 0,0 10,15A2,2 0 0,0 12,17Z"/>
                        </svg>
                      </button>
                      <button @click="deleteUser(user)" class="action-btn delete" title="删除">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                          <path d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z"/>
                        </svg>
                      </button>
                    </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

          <!-- 分页 -->
      <div class="pagination">
            <div class="page-info">
              <span>第 {{ currentPage + 1 }} 页，共 {{ totalPages }} 页，总计 {{ totalUsers }} 条记录</span>
            </div>
            <div class="page-controls">
              <button 
                @click="changePage(currentPage - 1)" 
                :disabled="currentPage === 0"
                class="page-btn"
              >
                上一页
              </button>
              <button 
                @click="changePage(currentPage + 1)" 
                :disabled="currentPage >= totalPages - 1"
                class="page-btn"
              >
                下一页
              </button>
            </div>
          </div>
        </div>

    <!-- 用户详情模态框 -->
    <div v-if="showUserModal" class="modal-overlay" @click="closeUserModal">
      <div class="modal-content user-modal" @click.stop>
        <div class="modal-header">
          <h3>用户详情</h3>
          <button @click="closeUserModal" class="close-btn">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
              <path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"/>
            </svg>
          </button>
        </div>
        
        <div class="modal-body" v-if="selectedUser">
          <div class="user-profile">
            <!-- 用户头像居中显示 -->
            <div class="profile-avatar-section">
              <div class="profile-avatar-large">
                <img v-if="selectedUser.avatar" :src="selectedUser.avatar" :alt="selectedUser.username" />
                <div v-else class="default-avatar-large">
                  <svg width="80" height="80" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z"/>
                  </svg>
                </div>
              </div>
              <div class="profile-info-center">
                <h4>{{ selectedUser.username }}</h4>
                <p class="user-id">用户ID: {{ selectedUser.userId }}</p>
                <span class="status-badge" :class="getUserStatus(selectedUser)">
                  {{ getStatusText(selectedUser) }}
                </span>
              </div>
            </div>

            <!-- 详细信息 -->
            <div class="profile-details">
              <div class="detail-section">
                <h5>基本信息</h5>
                <div class="detail-grid">
                  <div class="detail-item">
                    <label>用户名</label>
                    <span>{{ selectedUser.username }}</span>
                  </div>
                  <div class="detail-item">
                    <label>邮箱</label>
                    <span>{{ selectedUser.email || '未设置' }}</span>
                  </div>
                  <div class="detail-item">
                    <label>手机号</label>
                    <span>{{ selectedUser.phone || '未绑定' }}</span>
                  </div>
                  <div class="detail-item">
                    <label>注册时间</label>
                    <span>{{ formatDateTime(selectedUser.createdTime) }}</span>
                  </div>
                  <div class="detail-item">
                    <label>最后登录</label>
                    <span>{{ formatDateTime(selectedUser.lastLoginTime) || '从未登录' }}</span>
                  </div>
                  <div class="detail-item">
                    <label>账户状态</label>
                    <span>{{ selectedUser.status === 0 ? '正常' : '锁定' }}</span>
                  </div>
                </div>
              </div>

              <!-- 账户统计 -->
              <div class="detail-section">
                <h5>账户统计</h5>
                <div class="stats-grid">
                  <div class="stat-card mini">
                    <div class="stat-icon">
                      <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M12 3V13.55C11.41 13.21 10.73 13 10 13C7.79 13 6 14.79 6 17S7.79 21 10 21 14 19.21 14 17V7H18V3H12Z"/>
                      </svg>
                    </div>
                    <div class="stat-info">
                      <span class="stat-number">0</span>
                      <span class="stat-label">收藏音乐</span>
                    </div>
                  </div>
                  <div class="stat-card mini">
                    <div class="stat-icon">
                      <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M8,5.14V19.14L19,12.14L8,5.14Z"/>
                      </svg>
                    </div>
                    <div class="stat-info">
                      <span class="stat-number">0</span>
                      <span class="stat-label">播放次数</span>
                    </div>
                  </div>
                  <div class="stat-card mini">
                    <div class="stat-icon">
                      <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z"/>
                      </svg>
                    </div>
                    <div class="stat-info">
                      <span class="stat-number">0</span>
                      <span class="stat-label">播放列表</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 编辑用户模态框 -->
    <div v-if="showEditModal" class="modal-overlay" @click="closeEditModal">
      <div class="modal-content edit-modal" @click.stop>
        <div class="modal-header">
          <h3>编辑用户</h3>
          <button @click="closeEditModal" class="close-btn">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
              <path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"/>
            </svg>
          </button>
        </div>
        
        <div class="modal-body" v-if="editingUser">
          <form @submit.prevent="saveUser" class="edit-form">
            <div class="form-group">
              <label>用户名</label>
              <input 
                v-model="editingUser.username" 
                type="text" 
                required
                placeholder="请输入用户名"
              />
            </div>
            
            <div class="form-group">
              <label>邮箱</label>
              <input 
                v-model="editingUser.email" 
                type="email" 
                required
                placeholder="请输入邮箱"
              />
            </div>
            
            <div class="form-group">
              <label>手机号</label>
              <input 
                v-model="editingUser.phone" 
                type="tel" 
                placeholder="请输入手机号"
              />
            </div>
            
            <div class="form-group">
              <label>新密码</label>
              <div class="password-input">
                <input 
                  v-model="editingUser.password" 
                  :type="showPassword ? 'text' : 'password'"
                  placeholder="留空则不修改密码"
                />
                <button type="button" @click="togglePassword" class="password-toggle">
                  <svg v-if="showPassword" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z"/>
                  </svg>
                  <svg v-else width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M11.83,9L15,12.16C15,12.11 15,12.05 15,12A3,3 0 0,0 12,9C11.94,9 11.89,9 11.83,9M7.53,9.8L9.08,11.35C9.03,11.56 9,11.77 9,12A3,3 0 0,0 12,15C12.22,15 12.44,14.97 12.65,14.92L14.2,16.47C13.53,16.8 12.79,17 12,17A5,5 0 0,1 7,12C7,11.21 7.2,10.47 7.53,9.8M2,4.27L4.28,6.55L4.73,7C3.08,8.3 1.78,10 1,12C2.73,16.39 7,19.5 12,19.5C13.55,19.5 15.03,19.2 16.38,18.66L16.81,19.09L19.73,22L21,20.73L3.27,3M12,7A5,5 0 0,1 17,12C17,12.64 16.87,13.26 16.64,13.82L19.57,16.75C21.07,15.5 22.27,13.86 23,12C21.27,7.61 17,4.5 12,4.5C10.6,4.5 9.26,4.75 8,5.2L10.17,7.35C10.76,7.13 11.37,7 12,7Z"/>
                  </svg>
                </button>
              </div>
            </div>
            
            <div class="form-group">
              <label>账户状态</label>
              <select v-model="editingUser.status">
                <option :value="0">正常</option>
                <option :value="1">锁定</option>
              </select>
            </div>
            
            <div class="form-actions">
              <button type="button" @click="closeEditModal" class="btn cancel">
                取消
              </button>
              <button type="submit" class="btn save" :disabled="saving">
                {{ saving ? '保存中...' : '保存' }}
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </AdminLayout>
</template>

<script>
import AdminLayout from '@/components/AdminLayout.vue'
import { userManagement } from '@/utils/adminApi'

export default {
  name: 'AdminUsersView',
  components: {
    AdminLayout
  },
  data() {
    return {
      usersList: [],
      searchKeyword: '',
      selectedSort: '',
      currentPage: 0,
      totalPages: 0,
      totalUsers: 0,
      pageSize: 10,
      
      // 选择状态
      selectedUsers: [],
      
      // 模态框状态
      showUserModal: false,
      selectedUser: null,
      showEditModal: false,
      editingUser: null,
      saving: false,
      showPassword: false
    }
  },
  
  computed: {
    isAllSelected() {
      return this.usersList.length > 0 && this.selectedUsers.length === this.usersList.length
    }
  },
  
  async mounted() {
    await this.loadUsers()
  },
  
  methods: {
    async loadUsers() {
      try {
        const response = await userManagement.getUsers(this.currentPage, this.pageSize)
        if (response.success) {
          this.usersList = response.users
          this.totalPages = response.totalPages
          this.totalUsers = response.totalElements
        }
      } catch (error) {
        console.error('获取用户列表失败:', error)
      }
    },
    
    async deleteUser(user) {
      const confirmed = await this.$root.showConfirm({
        title: '删除用户',
        message: `确定要删除用户「${user.username}」吗？`,
        detail: '此操作不可恢复！用户的所有数据将被永久删除。',
        type: 'danger',
        confirmText: '删除',
        cancelText: '取消'
      })

      if (confirmed) {
        try {
          const response = await userManagement.deleteUser(user.userId)
          if (response.success) {
            await this.loadUsers()
          }
        } catch (error) {
          console.error('删除用户失败:', error)
        }
      }
    },
    
    async viewUserDetails(user) {
      try {
        const response = await userManagement.getUserDetails(user.userId)
        if (response.success) {
          this.selectedUser = response.user
          this.showUserModal = true
        }
      } catch (error) {
        console.error('获取用户详情失败:', error)
        // 如果获取详情失败，使用列表中的用户信息
        this.selectedUser = user
        this.showUserModal = true
      }
    },
    
    closeUserModal() {
      this.showUserModal = false
      this.selectedUser = null
    },
    
    async changePage(page) {
      if (page >= 0 && page < this.totalPages) {
        this.currentPage = page
        await this.loadUsers()
      }
    },
    
    searchUsers() {
      // 实现搜索功能
      console.log('搜索用户:', this.searchKeyword)
    },
    
    sortUsers() {
      // 实现排序功能
      console.log('排序方式:', this.selectedSort)
    },
    
    formatDate(dateString) {
      if (!dateString) return '-'
      return new Date(dateString).toLocaleDateString('zh-CN')
    },
    
    formatTime(dateString) {
      if (!dateString) return '-'
      return new Date(dateString).toLocaleTimeString('zh-CN', {
        hour12: false,
        hour: '2-digit',
        minute: '2-digit'
      })
    },
    
    formatDateTime(dateString) {
      if (!dateString) return null
      return new Date(dateString).toLocaleString('zh-CN')
    },
    
    formatPhone(phoneNumber) {
      if (!phoneNumber) return null
      return phoneNumber.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
    },
    
    getUserStatus(user) {
      // 根据用户最后登录时间判断状态
      if (!user.lastLoginTime) return 'inactive'
      
      const lastLogin = new Date(user.lastLoginTime)
      const now = new Date()
      const daysDiff = (now - lastLogin) / (1000 * 60 * 60 * 24)
      
      if (daysDiff <= 7) return 'active'
      if (daysDiff <= 30) return 'inactive'
      return 'dormant'
    },
    
    getStatusText(user) {
      const status = this.getUserStatus(user)
      const statusMap = {
        active: '活跃',
        inactive: '非活跃',
        dormant: '休眠'
      }
      return statusMap[status] || '未知'
    },
    

    
    isUserSelected(userId) {
      return this.selectedUsers.includes(userId)
    },
    
    toggleUserSelection(userId) {
      if (this.selectedUsers.includes(userId)) {
        this.selectedUsers = this.selectedUsers.filter(id => id !== userId)
      } else {
        this.selectedUsers.push(userId)
      }
    },
    
    toggleSelectAll() {
      if (this.isAllSelected) {
        this.selectedUsers = []
      } else {
        this.selectedUsers = this.usersList.map(user => user.userId)
      }
    },
    
    clearSelection() {
      this.selectedUsers = []
    },
    
    async batchDelete() {
      const confirmed = await this.$root.showConfirm({
        title: '批量删除用户',
        message: `确定要删除选中的 ${this.selectedUsers.length} 个用户吗？`,
        detail: '此操作不可恢复！所有选中用户的数据将被永久删除。',
        type: 'danger',
        confirmText: '删除',
        cancelText: '取消'
      })

      if (confirmed) {
        try {
          const response = await userManagement.batchDeleteUsers(this.selectedUsers)
          if (response.success) {
            await this.loadUsers()
            this.selectedUsers = []
          }
        } catch (error) {
          console.error('批量删除用户失败:', error)
        }
      }
    },
    
    async editUser(user) {
      try {
        const response = await userManagement.getUserDetails(user.userId)
        if (response.success) {
          this.editingUser = response.user
          this.showEditModal = true
        }
      } catch (error) {
        console.error('获取用户详情失败:', error)
        // 如果获取详情失败，使用列表中的用户信息
        this.editingUser = user
        this.showEditModal = true
      }
    },
    
    async saveUser() {
      try {
        const response = await userManagement.updateUser(this.editingUser)
        if (response.success) {
          await this.loadUsers()
          this.showEditModal = false
        }
      } catch (error) {
        console.error('更新用户失败:', error)
      }
    },
    
    closeEditModal() {
      this.showEditModal = false
      this.editingUser = null
      this.showPassword = false
    },
    
    togglePassword() {
      this.showPassword = !this.showPassword
    },
    
    async toggleUserStatus(user) {
      const newStatus = user.status === 0 ? 1 : 0
      const action = newStatus === 1 ? '锁定' : '解锁'
      
      const confirmed = await this.$root.showConfirm({
        title: `${action}用户`,
        message: `确定要${action}用户「${user.username}」吗？`,
        detail: newStatus === 1 ? '锁定后用户将无法登录系统' : '解锁后用户可以正常登录系统',
        type: 'warning',
        confirmText: action,
        cancelText: '取消'
      })

      if (confirmed) {
        try {
          const updatedUser = { ...user, status: newStatus }
          const response = await userManagement.updateUser(updatedUser)
          if (response.success) {
            await this.loadUsers()
          }
        } catch (error) {
          console.error(`${action}用户失败:`, error)
        }
      }
    },
    
    async batchLock() {
      const confirmed = await this.$root.showConfirm({
        title: '批量锁定用户',
        message: `确定要锁定选中的 ${this.selectedUsers.length} 个用户吗？`,
        detail: '锁定后这些用户将无法登录系统',
        type: 'warning',
        confirmText: '锁定',
        cancelText: '取消'
      })

      if (confirmed) {
        try {
          const response = await userManagement.batchUpdateStatus(this.selectedUsers, 1)
          if (response.success) {
            this.$root.showToast(`成功锁定 ${this.selectedUsers.length} 个用户`, 'success')
            await this.loadUsers()
            this.selectedUsers = []
          }
        } catch (error) {
          console.error('批量锁定用户失败:', error)
          this.$root.showToast('批量锁定用户失败: ' + (error.response?.data?.message || error.message), 'error')
        }
      }
    },
    
    async batchUnlock() {
      const confirmed = await this.$root.showConfirm({
        title: '批量解锁用户',
        message: `确定要解锁选中的 ${this.selectedUsers.length} 个用户吗？`,
        detail: '解锁后这些用户可以正常登录系统',
        type: 'info',
        confirmText: '解锁',
        cancelText: '取消'
      })

      if (confirmed) {
        try {
          const response = await userManagement.batchUpdateStatus(this.selectedUsers, 0)
          if (response.success) {
            this.$root.showToast(`成功解锁 ${this.selectedUsers.length} 个用户`, 'success')
            await this.loadUsers()
            this.selectedUsers = []
          }
        } catch (error) {
          console.error('批量解锁用户失败:', error)
          this.$root.showToast('批量解锁用户失败: ' + (error.response?.data?.message || error.message), 'error')
        }
      }
    }
  }
}
</script>

<style scoped>
/* 基础样式 */
.admin-dashboard {
  display: flex;
  height: 100vh;
  background: #000;
  color: white;
}

.admin-sidebar {
  width: 280px;
  background: #040404;
  border-right: 1px solid #282828;
  display: flex;
  flex-direction: column;
  padding: 24px 0;
}

.admin-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 24px;
  margin-bottom: 32px;
  font-size: 20px;
  font-weight: 700;
  color: #1db954;
}

.admin-nav {
  flex: 1;
  padding: 0 12px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  color: #b3b3b3;
  text-decoration: none;
  border-radius: 8px;
  margin-bottom: 4px;
  transition: all 0.3s ease;
  font-weight: 500;
  cursor: pointer;
}

.nav-item:hover {
  background: #1a1a1a;
  color: white;
}

.nav-item.active {
  background: #1db954;
  color: black;
}

.admin-user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid #282828;
}

.admin-avatar {
  width: 40px;
  height: 40px;
  background: #282828;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b3b3b3;
}

.admin-info {
  flex: 1;
}

.admin-name {
  display: block;
  font-weight: 600;
  color: white;
}

.admin-role {
  display: block;
  font-size: 12px;
  color: #b3b3b3;
}

.logout-btn {
  background: transparent;
  border: none;
  color: #b3b3b3;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.logout-btn:hover {
  color: #ff6b6b;
  background: rgba(255, 107, 107, 0.1);
}

.admin-content {
  flex: 1;
  background: #121212;
}

/* 用户管理页面样式 */
.users-management {
  padding: 32px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 32px;
}

.header-left h1 {
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 8px 0;
  color: white;
}

.page-subtitle {
  color: #b3b3b3;
  margin: 0;
}

.header-stats {
  display: flex;
  gap: 24px;
}

.stat-item {
  text-align: center;
}

.stat-number {
  display: block;
  font-size: 28px;
  font-weight: 700;
  color: #1db954;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: #b3b3b3;
}

/* 操作栏 */
.action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  gap: 16px;
}

.left-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.right-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.batch-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.batch-btn {
  padding: 8px 16px;
  border-radius: 6px;
  border: none;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.batch-btn.delete {
  background: #ff6b6b;
  color: white;
}

.batch-btn.delete:hover {
  background: #ff5252;
}

.batch-btn.clear {
  background: #6c757d;
  color: white;
}

.batch-btn.clear:hover {
  background: #5a6268;
}

.search-box {
  position: relative;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  border-radius: none;
  flex: 1;
  max-width: 400px;
}

.search-box svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #b3b3b3;
}

.search-box input {
  width: 100%;
  background: #1a1a1a;
  border: 1px solid #282828;
  border-radius: 8px;
  padding: 12px 12px 12px 40px;
  color: white;
  font-size: 14px;
}

.search-box input:focus {
  outline: none;
  border-color: #1db954;
}

.sort-filter {
  background: #1a1a1a;
  border: 1px solid #282828;
  border-radius: 8px;
  padding: 12px 16px;
  color: white;
  min-width: 150px;
}

/* 用户表格 */
.users-table-container {
  background: #1a1a1a;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 24px;
}

.users-table {
  width: 100%;
  border-collapse: collapse;
}

.users-table th {
  background: #282828;
  color: #b3b3b3;
  padding: 16px;
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.users-table td {
  padding: 16px;
  border-bottom: 1px solid #282828;
  vertical-align: middle;
}

.user-row:hover {
  background: #282828;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #282828;
}

.user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.default-avatar {
  color: #b3b3b3;
}

.default-avatar.large {
  width: 80px;
  height: 80px;
  background: #282828;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-details {
  display: flex;
  flex-direction: column;
}

.username {
  color: white;
  font-weight: 600;
  margin-bottom: 2px;
}

.user-id {
  font-size: 12px;
  color: #b3b3b3;
}

.email {
  color: #b3b3b3;
}

.phone {
  font-family: monospace;
  color: #b3b3b3;
}

.status-badge {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

.status-badge.active {
  background: #1db954;
  color: black;
}

.status-badge.inactive {
  background: #ffa500;
  color: black;
}

.status-badge.dormant {
  background: #666;
  color: white;
}

/* 复选框样式 */
.checkbox {
  width: 16px;
  height: 16px;
  accent-color: #1db954;
  cursor: pointer;
}

/* 联系信息样式 */
.contact-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.contact-info .email {
  color: white;
  font-size: 14px;
}

.contact-info .phone {
  color: #b3b3b3;
  font-size: 12px;
  font-family: monospace;
}

/* 时间信息样式 */
.time-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.time-info .date {
  color: white;
  font-size: 14px;
}

.time-info .time {
  color: #b3b3b3;
  font-size: 12px;
}

/* 操作按钮样式 */
.action-buttons {
  display: flex;
  gap: 4px;
}

.action-btn {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.action-btn.view {
  background: #4a90e2;
  color: white;
}

.action-btn.view:hover {
  background: #357abd;
}

.action-btn.edit {
  background: #f5a623;
  color: white;
}

.action-btn.edit:hover {
  background: #d1890b;
}

.action-btn.delete {
  background: #d0021b;
  color: white;
}

.action-btn.delete:hover {
  background: #a8001a;
}

/* 分页样式 */
.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
}

.page-info {
  color: #b3b3b3;
  font-size: 14px;
}

.page-controls {
  display: flex;
  gap: 8px;
}

.page-btn {
  padding: 8px 16px;
  background: #1a1a1a;
  border: 1px solid #282828;
  border-radius: 6px;
  color: white;
  cursor: pointer;
  transition: all 0.2s ease;
}

.page-btn:hover:not(:disabled) {
  background: #282828;
  border-color: #1db954;
}

.page-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 编辑模态框样式 */
.edit-modal {
  width: 500px;
  max-width: 90vw;
}

.edit-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  color: white;
  font-weight: 600;
  font-size: 14px;
}

.form-group input,
.form-group select {
  background: #1a1a1a;
  border: 1px solid #282828;
  border-radius: 6px;
  padding: 12px;
  color: white;
  font-size: 14px;
}

.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: #1db954;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 20px;
}

.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn.cancel {
  background: #6c757d;
  color: white;
}

.btn.cancel:hover {
  background: #5a6268;
}

.btn.save {
  background: #1db954;
  color: white;
}

.btn.save:hover:not(:disabled) {
  background: #1aa854;
}

.btn.save:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}



/* 模态框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.modal-content {
  background: #1a1a1a;
  border-radius: 12px;
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.user-modal {
  max-width: 700px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  border-bottom: 1px solid #282828;
}

.modal-header h3 {
  margin: 0;
  color: white;
  font-size: 20px;
}

.close-btn {
  background: transparent;
  border: none;
  color: #b3b3b3;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.close-btn:hover {
  color: white;
  background: #282828;
}

.modal-body {
  padding: 24px;
  overflow-y: auto;
}

/* 用户详情样式 */
.profile-header {
  display: flex;
  gap: 20px;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid #282828;
}

.profile-avatar {
  flex-shrink: 0;
}

.profile-info h4 {
  margin: 0 0 8px 0;
  font-size: 24px;
  color: white;
}

.profile-info .user-id {
  display: block;
  margin-bottom: 12px;
  color: #b3b3b3;
  font-size: 14px;
}

.detail-section {
  margin-bottom: 32px;
}

.detail-section h5 {
  margin: 0 0 16px 0;
  color: white;
  font-size: 16px;
  font-weight: 600;
}

.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.detail-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.detail-item label {
  font-size: 12px;
  color: #b3b3b3;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.detail-item span {
  color: white;
  font-weight: 500;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.stat-card.mini {
  background: #282828;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.stat-card.mini .stat-icon {
  width: 32px;
  height: 32px;
  background: #1db954;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: black;
}

.stat-card.mini .stat-info {
  display: flex;
  flex-direction: column;
}

.stat-card.mini .stat-number {
  font-size: 18px;
  font-weight: 700;
  color: white;
  margin-bottom: 2px;
}

.stat-card.mini .stat-label {
  font-size: 12px;
  color: #b3b3b3;
}

/* 新增样式 */
/* 头像居中显示 */
.profile-avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid #282828;
}

.profile-avatar-large {
  margin-bottom: 16px;
}

.profile-avatar-large img,
.default-avatar-large {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
}

.default-avatar-large {
  background: #282828;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b3b3b3;
}

.profile-info-center h4 {
  margin: 0 0 8px 0;
  font-size: 24px;
  color: white;
}

.profile-info-center .user-id {
  display: block;
  margin-bottom: 12px;
  color: #b3b3b3;
  font-size: 14px;
}

/* 密码输入框样式 */
.password-input {
  position: relative;
  display: flex;
  align-items: center;
}

.password-input input {
  flex: 1;
  padding-right: 40px;
}

.password-toggle {
  position: absolute;
  right: 8px;
  background: transparent;
  border: none;
  color: #b3b3b3;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.password-toggle:hover {
  color: white;
  background: #282828;
}

/* 批量操作按钮样式 */
.batch-btn.lock {
  background: #ff9500;
  color: white;
}

.batch-btn.lock:hover {
  background: #e6850e;
}

.batch-btn.unlock {
  background: #1db954;
  color: white;
}

.batch-btn.unlock:hover {
  background: #1aa854;
}

/* 状态切换按钮样式 */
.action-btn.lock {
  color: #ff9500;
}

.action-btn.lock:hover {
  background: rgba(255, 149, 0, 0.1);
}

.action-btn.unlock {
  color: #1db954;
}

.action-btn.unlock:hover {
  background: rgba(29, 185, 84, 0.1);
}
</style> 